<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="padding: 100px">
<canvas id="cvs" width="900" height="600" style=" border: 1px solid #000;"></canvas>
<script>
    //1获取标签和上下文
    var cvs = document.getElementById('cvs');
    var ctx = cvs.getContext('2d');
    cvs.onmousedown =function (e) {
        //清屏
       ctx.clearRect(0,0,cvs.width,cvs.height);
//       cvs.width = 900;
        //  开启路径
        ctx.beginPath();
        // 设置起点
        ctx.moveTo(e.clientX,e.clientY);
        // 监听鼠标的移动事件
        cvs.onmousemove = function (e) {
            //设置终点位置
            ctx.lineTo(e.clientX,e.clientY);
            ctx.stroke();
        };
        cvs.onmouseup =function () {
            cvs.onmousemove = null;
            cvs.onmouseup = null;
        }
    };

    
</script>

</body>
</html>